<!DOCTYPE html>
<html>
<head>
    <title>药品查询--中软高科-2015</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../Css/style.css"/>
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>

<form id="myForm" action="index.html" method="get" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">药品名称：</td>
            <td>
                <input type="text" name="drugName" value=""/></td>
            <td width="10%" class="tableleft">药品类型：</td>
            <td>
            <select name="drugType">
                <option value="">请选择药品类型</option>
                <option value="中药">中药</option>
                <option value="西药">西药</option>
                <option value="处方">处方</option>
                <option value="非处方">非处方</option>
            </select></td>
        </tr>
        <tr>
            <td width="10%" class="tableleft">页号：</td>
            <td><input type="text" class="abc input-default" placeholder="" name="pageNum" value="1"/> &nbsp;</td>
            <td width="10%" class="tableleft">单页条数：</td>
            <td><select class="form-control" name="pageSize">
                <option value="5" selected="selected">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
            </select> &nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">
                <center>
                    <button name="query" onclick="loadData()" class="btn btn-primary" type="button">查询</button>
                    <button class="btn btn-primary" type="reset">清空</button>
                </center>
            </td>
        </tr>
    </table>
</form>

<table class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
        <th>药品编号</th>
        <th>药品名称</th>
        <th>药品类型</th>
        <th>简单描述</th>
        <th>状态</th>
        <th>剩余量</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
        <tr>
            <td style="vertical-align:middle;">J1121</td>
            <td style="vertical-align:middle;">感冒药</td>
            <td style="vertical-align:middle;">处方</td>
            <td style="vertical-align:middle;">用于普通感冒</td>
            <td style="vertical-align:middle;">销售中</td>
            <td style="vertical-align:middle;">1000袋</td>
            <td style="vertical-align:middle;">
                <a href="add.html">更改</a>&nbsp;&nbsp;&nbsp;
                <a href="add_medicine.html">添加库存</a>&nbsp;&nbsp;&nbsp;
                <a href="look.html">详情>>></a>
            </td>
        </tr>
    </tbody>

</table>

<table class="table table-bordered table-hover definewidth m10">
    <tr>
        <th colspan="5">
            <div class="inline pull-right page" id="ppp">
                <span name="page1" id="firstPage"><a href="javascript:void(0)">第一页</a></span>
                <span name="page2" id="prePage"><a href="javascript:void(0)">上一页</a></span>
                <span name="page3" id="nextPage"><a href="javascript:void(0)">下一页</a></span>
                <span name="page4" id="lastPage"><a href="javascript:void(0)">最后一页</a></span>
                共<span  id="total"></span> 条记录 <span id="pageNum">1</span> /<span id="pages">1</span>页</div>
                <div>
                    <button type="button" class="btn btn-success" id="newNav">添加新药</button>
                    <button type="button" class="btn btn-success" id="exportInfo">导出Excel</button>
                </div>
            </div>
        </th>
    </tr>
</table>
<script type="text/javascript">
    String.prototype.GetValue = function (para) {
        let reg = new RegExp("(^|&)" + para + "=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?") + 1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    //页面加载时
    $(function () {
        loadData();
        $("#firstPage").click(function () {
            if (($(this).attr("class")) == 'disabled')
                return;
            let num = $(this).attr("name");
            $("input[name='pageNum']").val(num);
            loadData();
        });
        $("#prePage").click(function () {
            if (($(this).attr("class")) == 'disabled')
                return;
            let num = $(this).attr("name");
            $("input[name='pageNum']").val(num);
            loadData();
        });
        $("#nextPage").click(function () {
            if (($(this).attr("class")) == 'disabled')
                return;
            let num = $(this).attr("name");
            $("input[name='pageNum']").val(num);
            loadData();
        });
        $("#lastPage").click(function () {
            if (($(this).attr("class")) == 'disabled')
                return;
            let num = $(this).attr("name");
            $("input[name='pageNum']").val(num);
            loadData();
        });
        $('#newNav').click(function () {
            window.location.href = "add.html";
        });
        $("#exportInfo").click(function () {
            window.location.href="/Medicine/exportExcel.html";
        });

    });

    //填充分页信息
    function fillPageData(pageInfo) {
        //填充信息
        $("#total").html(pageInfo.total);
        $("#pages").html(pageInfo.pages);
        $("span[id='pageNum']").val(pageInfo.pageNum);
        $("select[name='pageSize']").val(pageInfo.pageSize);
        $("input[name='pageNum']").val(pageInfo.pageNum);
        //设置按钮的属性值和样式
        $("#firstPage").attr("name", 1);
        $("#prePage").attr("name", pageInfo.prePage);
        $("#nextPage").attr("name", pageInfo.nextPage);
        $("#lastPage").attr("name", pageInfo.pages);
        $("#firstPage").removeClass("disabled");
        $("#prePage").removeClass("disabled");
        $("#nextPage").removeClass("disabled");
        $("#lastPage").removeClass("disabled");
        if (pageInfo.isFirstPage) {//如果是第一页：上一页和首页禁用
            $("#firstPage").addClass("disabled");
            $("#prePage").addClass("disabled");
        }
        if (pageInfo.isLastPage) {//如果已经是最后一页：下一页和末页禁用
            $("#nextPage").addClass("disabled");
            $("#lastPage").addClass("disabled");
        }
    }

    //加载数据
    function loadData(){
        let url = document.location.toString();
        let pageNum = url.GetValue("pageNum");
        let pageSize = url.GetValue("pageSize");
        if (pageNum != null && $("input[name='pageNum']").val() != null) {
            $("input[name='pageNum']").val(pageNum);
        }
        if (pageSize != null && $("select[name='pageSize']").val() != null) {
            $("select[name='pageSize']").val(pageSize);
        }
        $.ajax({
            type:"GET",
            url:"/drug/list",
            data:$("#myForm").serialize(),
            dataType:"json",
            success: function(vo){
                let list = vo.pageInfo.list;
                let str="";
                for (let i = 0; i < list.length; i++) {
                    let obj = list[i];
                    let id = obj.id;
                    let drugName = obj.drugName;
                    let drugType = obj.drugType==null?'':obj.drugType;
                    let description = obj.description==null?'':obj.description;
                    let status = obj.status===1?'销售中':'暂停销售';
                    let resetNumber = obj.resetNumber;
                    str+='<tr>\n' +
                        '            <td style="vertical-align:middle;">'+id+'</td>\n' +
                        '            <td style="vertical-align:middle;">'+drugName+'</td>\n' +
                        '            <td style="vertical-align:middle;">'+drugType+'</td>\n' +
                        '            <td style="vertical-align:middle;">'+description+'</td>\n' +
                        '            <td style="vertical-align:middle;">'+status+'</td>\n' +
                        '            <td style="vertical-align:middle;">'+resetNumber+'</td>\n' +
                        '            <td style="vertical-align:middle;">\n' +
                        '                <a href="update.html?id='+id+'">更改</a>&nbsp;&nbsp;&nbsp;\n' +
                        '                <a href="add_medicine.html?id='+id+'">添加库存</a>&nbsp;&nbsp;&nbsp;\n' +
                        '                <a href="look.html?id='+id+'">详情>>></a>&nbsp;&nbsp;&nbsp;\n' +
                        '                <a href="uploadLogo.html?id='+id+'">图片上传</a>\n' +
                        '            </td>\n' +
                        '        </tr>'
                }
                $("#tbody").html(str);
                //填充分页数据
                fillPageData(vo.pageInfo);
            }
        });
    }

</script>
</body>
</html>
